<template>
    <el-row :gutter="30">
        <el-card style="margin:0 0 20px 0px">
            <el-row class="form-row">
                <el-form label-position="right" :rules="rules" :model="filters" inline>
                    <el-form-item label="合同类别名称">
                        <div class="filters-input">
                            <el-input v-model="filters.categoryName"></el-input>
                        </div>
                    </el-form-item>
                    <el-button type="primary" icon="ios-search" size="large" @click="loadData()">
                        搜索
                    </el-button>
                </el-form>
            </el-row>
            <el-row class="form-row">
                <el-button type="primary" icon="md-add" size="large"
                           @click="addCategory('新增')">
                    新增
                </el-button>
            </el-row>

            <el-table stripe border :data="tableData" size="large" ref="table">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="deptName" label="公司"></el-table-column>
                <el-table-column prop="categoryCode" label="合同类别编号"></el-table-column>
                <el-table-column prop="categoryName" label="合同类别名称"></el-table-column>
                <!--<el-table-column prop="description" label="提交人"></el-table-column>-->
                <el-table-column prop="createTime" label="提交时间"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="addCategory('修改',scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="deleteCategory(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </el-card>

        <el-dialog :title="categoryTitle" :visible.sync="categoryVisible" :close-on-click-modal="false" width="900px">
            <el-form :model="category" :rules="rules" ref="categoryForm" label-width="150px">
                <el-form-item label="合同类别编号" prop="categoryCode">
                    <el-input v-model="category.categoryCode"></el-input>
                </el-form-item>
                <el-form-item label="合同类别名称" prop="categoryName">
                    <el-input v-model="category.categoryName"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="categoryVisible = false">取 消</el-button>
                <el-button type="primary" :loading="formLoading" @click="sureAddCategory('categoryForm')">确 定
                </el-button>
            </div>
        </el-dialog>
    </el-row>
</template>
<script>
    export default {
        data() {
            return {
                //校验规则
                rules: {
                    categoryCode: [
                        {
                            required: true,
                            message: "合同类别编号不能为空",
                        }
                    ],
                    categoryName: [
                        {
                            required: true,
                            message: "合同类别名称不能为空",
                        }
                    ],
                },
                categoryTitle: "",
                categoryVisible: false,
                category: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                filters: {},
                //表单提交状态
                formLoading: false,
                tableData: [],
            };
        },

        created: function () {
            this.loadData();
        },
        methods: {
            //加载数据
            loadData() {
                let params = this.filters;
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;
                //与后台交换数据
                this.postRequest("/api/contractCategory/loadData", params).then(res => {
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //打开新增页面
            addCategory(str, row) {
                this.category = {};
                this.categoryTitle = str;
                this.categoryVisible = true;
                if ('修改' == str) {
                    this.category = row;
                }
            },
            //确定新增
            sureAddCategory(categoryForm) {
                this.formLoading = true;
                this.$refs[categoryForm].validate((valid) => {
                    if (valid) {
                        this.postRequest("/api/contractCategory/saveOrUpdateCategory", this.category).then(res => {
                            this.formLoading = false;
                            if (res.code == 20000) {
                                this.categoryVisible = false;
                                this.loadData();
                                this.$Message.success({
                                    content: "操作成功",
                                    duration: 5
                                });
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    }
                });
            },
            //删除
            deleteCategory(id) {
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该类别？",
                    onOk: () => {
                        this.getRequest("/api/contractCategory/deleteCategory?id=" + id).then(res => {
                            if (res.code == 20000) {
                                this.loadData();
                                this.$Message.success({
                                    content: "操作成功",
                                    duration: 5
                                });
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    }
                });
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        }
    };
</script>
